<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">

    <title>Shop Manager</title>
    <link rel="shortcut icon" href="img/favicon.ico" th:href="@{/model1/img/favicon.ico}">

    <!-- global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/model1/css/bootstrap.min.css}">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{/model1/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" href="css/font-icon-style.css" th:href="@{/model1/css/font-icon-style.css}">
    <link rel="stylesheet" href="css/style.default.css" th:href="@{/model1/css/style.default.css}" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="css/ui-elements/card.css" th:href="@{/model1/css/ui-elements/card.css}">
    <link rel="stylesheet" href="css/style.css" th:href="@{/model1/css/style.css}">
</head>

<body> 

<!--====================================================
                         MAIN NAVBAR
======================================================-->
    <header th:replace="model1/common/bar::topbar"></header>
<!--====================================================
                        PAGE CONTENT
======================================================-->
    <div class="page-content d-flex align-items-stretch">

        <!--***** SIDE NAVBAR *****-->
        <nav th:replace="model1/common/bar::sidebar(activeUri='index')"></nav>

        <div class="content-inner">
            <!--***** REPORT-1 *****-->     
            <div class="row" id="report1">
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0"><i class="ti-arrow-up text-success"></i> $9,220</h2>
                                <span class="text-muted">Todays Income</span>
                            </div>
                            <span class="text-success">80%</span>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 80%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p><small>Last month 10% Growth</small></p>
                        </div>
                    </div>
                </div> 
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-block">
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0"><i class="ti-arrow-up text-danger"></i> $5,530</h2>
                                <span class="text-muted">Gross Profit</span>
                            </div>
                            <span class="text-danger">43%</span>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 43%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p><small>Last month 10% Growth</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-block"> 
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0"><i class="ti-arrow-up text-warning"></i> $3,620</h2>
                                <span class="text-muted">Interest Expenses </span>
                            </div>
                            <span class="text-warning">53%</span>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 53%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p><small>Last month 10% Growth</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="card">
                        <div class="card-block"> 
                            <div class="text-left report1-cont">
                                <h2 class="font-light m-b-0"><i class="ti-arrow-up text-info"></i> $82,600</h2>
                                <span class="text-muted">Net Profit</span>
                            </div>
                            <span class="text-info">70%</span>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 70%; height: 6px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p><small>Last month 10% Growth</small></p>
                        </div>
                    </div>
                </div>                
            </div>
            <!--***** REPORT-2 *****-->
            <div class="row" id="report2">
                <div class="col-md-4">
                    <div class="card card-c1">
                        <div class="card-header card-chart" data-background-color="green"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <canvas class="ct-chart chartjs-render-monitor" id="myChart1" height="352" style="display: block; width: 423px; height: 352px;" width="423"></canvas>
                        </div>
                        <div class="card-content">
                            <h4 class="title">Daily Sales</h4>
                            <p class="category">
                                <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="fa fa-clock-o"></i> updated 4 minutes ago
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-c1">
                        <div class="card-header card-chart" data-background-color="orange"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <canvas class="ct-chart chartjs-render-monitor" id="myChart2" height="352" width="423" style="display: block; width: 423px; height: 352px;"></canvas>
                        </div>
                        <div class="card-content">
                            <h4 class="title">Email Subscriptions</h4>
                            <p class="category">Last Campaign Performance</p>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="fa fa-clock-o"></i> campaign sent 2 days ago
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-c1">
                        <div class="card-header card-chart" data-background-color="red"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                            <canvas class="ct-chart chartjs-render-monitor" id="myChart3" height="352" width="423" style="display: block; width: 423px; height: 352px;"></canvas>
                        </div>
                        <div class="card-content">
                            <h4 class="title">Completed Tasks</h4>
                            <p class="category">Last Campaign Performance</p>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="fa fa-clock-o"></i> campaign sent 2 days ago
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div> 

    <!--Global Javascript -->
    <script src="js/jquery.min.js" th:src="@{/model1/js/jquery.min.js}"></script>
    <script src="js/popper/popper.min.js" th:src="@{/model1/js/popper/popper.min.js}"></script>
    <script src="js/tether.min.js" th:src="@{/model1/js/tether.min.js}"></script>
    <script src="js/bootstrap.min.js" th:src="@{/model1/js/bootstrap.min.js}"></script>
    <script src="js/jquery.cookie.js" th:src="@{/model1/js/jquery.cookie.js}"></script>
    <script src="js/jquery.validate.min.js" th:src="@{/model1/js/jquery.validate.min.js}"></script>
    <script src="js/chart.min.js" th:src="@{/model1/js/chart.min.js}"></script>
    <script src="js/front.js" th:src="@{/model1/js/front.js}"></script>
    
    <!--Core Javascript -->
    <script src="js/mychart.js" th:src="@{/model1/js/mychart.js}"></script>

    <script src="" th:src="@{/model1/js/common.js}"></script>

</body>

</html>